﻿@{
	Layout = "_LayoutSelectList";
	ViewBag.Title = "选择单位";
}

@section header{
}


<table border="0" cellpadding="0" cellspacing="0" style="padding: 5px 0;width:100%;" class="list_table">
	<tbody>
		<tr>
			<td>
				<i class="icon-filter pure-icon-bu"></i>视图: <span style="padding-right: 5px; padding-top: 5px; padding-bottom: 5px;" id="dateRange">
					&nbsp;&nbsp;<a class="cus_markbai tablink" href="javascript:void(0);">所有</a>
				</span>
			</td>
		</tr>
	</tbody>
</table>
<div style="z-index: 1; display: block; position: relative; visibility: visible; margin-top: 3px;">
	<table cellpadding="5" cellspacing="0" class="searchUIBasic small padding3" align="center" border="0" style="width:100%;">
		<tbody>
			<tr>
				<td class="small" nowrap="" align="center">
					<span>名称</span>
					<input type="text" class="txtBox" style="width: 120px" v-model.trim="listConditions.name">
					<span>编号</span>
					<input type="text" class="txtBox" style="width: 80px" v-model.trim="listConditions.code">
					&nbsp;&nbsp;
					<button class="pure-button pure-button-edit" title="查找" @@click="listRefresh(1)"><i class="icon-search"></i>查找</button>
					&nbsp;
					<button class="pure-button pure-button-cancel" title="取消" @@click="searchReset"><i class="icon-rotate-left"></i>重置</button>
					&nbsp;&nbsp;
				</td>
			</tr>
			<tr v-if="listQuicks&&listQuicks.length>0">
				<td>
					<table border="0" cellspacing="0" cellpadding="0" style="font-size: 12px;width:100%;">
						<tbody>
							<tr>
								<td class="searchAlph" :class="{'searchAlphselected':listConditions.quicks==item}" align="center" @@click="listQuickSearch(item)" v-for="(item,idx) in listQuicks">{{item}}</td>
							</tr>
						</tbody>
					</table>
				</td>
			</tr>
		</tbody>
	</table>
</div>
<table border="0" cellspacing="0" cellpadding="0" class="small" align="center" style="width:100%;">
	<tbody>
		<tr>
			<td style="padding-right: 5px; text-align: right;">
				<vue-pagination :total="listData.total" :psize="listData.psize" :pnum="listData.pnum" @@change="pageChangeHandler"></vue-pagination>
			</td>
		</tr>
	</tbody>
</table>
<div style="width:100%;overflow:auto;">
	<table border="0" cellspacing="1" cellpadding="3" class="crm-table padding3" style="width:100%;table-layout:fixed;">
		<caption v-show="listData.list.length==0">
			暂无数据
		</caption>
		<tr class="windLayerHead">
			<td v-for="(col,idx) in listColumns" :style="col.hdStyles">
				<a class='listFormHeaderLinks' @@click="listSort(col.name)" v-if="col.sort">{{col.title}}<i :class="{'icon-caret-up':listSortColumn.order=='asc','icon-caret-down':listSortColumn.order=='desc'}" v-if="col.name==listSortColumn.name"></i></a>
				<span v-else>{{col.title}}</span>
			</td>
		</tr>
		<tr v-for="(item,idx) in pageList" :rid="item.ID" :class="{'crm-table-plural':idx%2==1}" style="cursor: pointer;" @@click="listSelect(item)">
			<td v-for="(col,cidx) in listColumns" :style="item.Styles[cidx]">
				<span v-if="col.format" v-html="col.format(item[col.name],item)"></span>
				<a :href="item.Links[cidx].href" v-else-if="item.Links[cidx].href">{{item[col.name]}}</a>
				<span v-else>{{item[col.name]}}</span>
			</td>
		</tr>
	</table>
</div>
@section footer{
	<link href="~/lib/ztree/ztree.css" rel="stylesheet" asp-append-version="true" />
	<script src="~/lib/ztree/ztree.core-3.5.37.min.js" asp-append-version="true"></script>
	<script src="~/lib/ztree/ztree.exedit-3.5.37.js" asp-append-version="true"></script>
	<script type="text/javascript">
		var listConditionsInit = Object.assign({},@(Html.Raw(ViewData["conditions"])));//初始查询条件
		var pageEnumData = {
			state:@(Json.Serialize(ViewBag.StateOptions)),
		};
		var pageData = {
			hideBreadcrumb: false,
			serviceCode: '@(ViewBag.ServiceCode)',
			global: globalData,
			listData: {
				checked:false,
				list: [],
				total: 0,
				pnum: 1,
				psize:20,
			},
			listQuicks: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
			listColumns: [
				{
					title: "区域",
					name: "AreaName",
					hdStyles: {
						width: "80px",
					},
					bdStyles: {
					}
				},
				{
					title: "单位名称",
					name: "Name",
					sort: true,
					href:"@(Url.Action("ViewDetail", "Sys_Organization"))/{ID}",
					hdStyles: {
						width: "120px",
					},
					bdStyles: {
					}
				},
				{
					title: "单位编码",
					name: "Code",
					sort: true,
					href:"@(Url.Action("ViewDetail", "Sys_Organization"))/{ID}",
					hdStyles: {
						width: "160px",
					},
					bdStyles: {
					}
				},
				{
					title: "负责人",
					name: "ChargeMan",
					hdStyles: {
						width: "60px",
					},
					bdStyles: {
					}
				},
				{
					title: "负责人手机号",
					name: "ChargeManPhone",
					hdStyles: {
						width: "120px",
					},
					bdStyles: {
					}
				},
				{
					title: "详细地址",
					name: "DetailAddress",
					hdStyles: {
						width: "210px",
					},
					bdStyles: {
					}
				},
				{
					title: "电话",
					name: "Phone",
					hdStyles: {
						width: "85px",
					},
					bdStyles: {
					}
				},
				{
					title: "传真",
					name: "Fax",
					hdStyles: {
						width: "85px",
					},
					bdStyles: {
					}
				},
				{
					title: "创建时间",
					name: "AddDate",
					hdStyles: {
						width: "120px",
					},
					bdStyles: {
					}
				}
			],
			searchShow:true,
			listConditions: Object.assign({}, listConditionsInit),
			listSortColumn: {
				name: "",
				order:""
			},
			listStyles: {
			},
			model: {},
		};

		var pageApp = new Vue({
			el: '#app',
			data: pageData,
			mounted: function () {
				this.listRefresh();
			},
			methods: {
				pageChangeHandler: function (args) {
					this.listRefresh(args.pnum, args.psize)
				},
				listRefresh: function (pageNum, pageSize) {
					var _params = Object.assign({}, {
						pnum: pageNum || this.listData.pnum,
						psize: pageSize || this.listData.psize,
						sortorder: !this.listSortColumn.name ? "" : this.listSortColumn.name + "_" + this.listSortColumn.order
					}, this.listConditions);
					var _this = this;
					utils.ajaxPost('@(Url.Action("Search", "Sys_Organization"))', _params, function (resp) {
						var newData = { list: resp.data.list, total: resp.data.total, pnum: resp.data.pnum, psize: resp.data.psize ,checked:false};
						_this.listData = newData;
					}, function (err) {
					})
				},
				searchReset: function () {
					this.listConditions = Object.assign({}, listConditionsInit);
					this.listSortColumn = {
						col: "",
						order: ""
					};
					this.listRefresh(1);
				},
				listQuickSearch: function (val) {
					this.listConditions = Object.assign({}, this.listConditions, {
						quicks:val
					});
					this.listRefresh(1);
				},
				listSort: function (col) {
					if (col != this.listSortColumn.name) {
						this.listSortColumn.order = "desc";
						this.listSortColumn.name = col;
					} else {
						this.listSortColumn.order = this.listSortColumn.order == "asc" ? "desc" : "asc";
					}
					this.listRefresh(1);
				},
				listSelect: function (item) {
					if (!item || !item.ID || item.ID == "0") {
						return;
					}
					var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
					parent.@(ViewData["callback"]) && parent.@(ViewData["callback"])(item);
					parent.layer.close(index);
				},
			},
			computed: {
				pageList: function () {
					var _this = this;
					return this.listData.list.map(function (item) {
						return Object.assign({}, item, {
							//StateNow: _this.$options.filters.formatState(item.StateNow),
							Styles: _this.listColumns.map(function (col) {
								return Object.assign({}, col.bdStyles, _this.listStyles[col.name] ? _this.listStyles[col.name][item[col.name]] : {})
							}),
							Links: _this.listColumns.map(function (col) {
								return Object.assign({}, { href: col.href ? col.href.replace(/{ID}/g, item.ID) : "" });
							}),
						});
					});
				}
			},
			filters: {
				formatState: function (val) {
					return utils.formatEnum(val, pageEnumData.state);
				}
			}
		});
	</script>
}
